import React ,{Component} from 'react'
// withRouter 不是路由组件 要获取路由组件 可以用  withRouter
import {Link,withRouter} from 'react-router-dom'
import {Menu, Icon} from 'antd';
import {connect} from 'react-redux'
import './index.less'
import logo from '../../assets/images/logo.png'
// 默认暴露的 名字可以随便写
import menuList from '../../config/menuConfig.js'
//import memoryUtils from "../../utils/memoryUtils";
import {setHeadTitle} from '../../redux/actions'

const SubMenu = Menu.SubMenu;


class LeftNav extends Component{
    
      /*
       根据menu的数据数组生成对应的标签数组
       使用map() + 递归调用
     */
     getMenuNodes_map = (menuList)=>{
        return menuList.map(item=>{
             /*
                {
                title: '首页', // 菜单标题名称
                key: '/home', // 对应的path
                icon: 'home', // 图标名称
                children: [], // 可能有, 也可能没有
              }
              */
           if(!item.children){
               return (
                <Menu.Item key={item.key}>
                <Link to={item.key}>
                  <Icon type={item.Icon}/>
                  <span>{item.title}</span>
                </Link>
                </Menu.Item>
               )
            }else{
               return (
                <SubMenu key={item.key}
                title={
                  <span>
                    <Icon type={item.Icon} />
                    <span>{item.title}</span>
                 </span>
                 }
               >
               {this.getMenuNodes(item.children)}
               </SubMenu> 
               )
            }
        })
     }
     
     //判断当前登陆用户对item是否有权限
     hasAuth =(item)=>{
          const {key,isPublic}= item;
          // 当前用户拥有的菜单权限 
         // const menus = memoryUtils.user.role.menus
         // const username = memoryUtils.user.username

          const menus = this.props.user.role.menus
          const username = this.props.user.username

          /*
          1. 如果当前用户是admin  全部通过
          2. 如果当前item是公开的  如果 menus 中一个 key 都没有 我们默认显示 首页出来
          3. 当前用户有此item的权限:   menus中key 有一部分 在  menuConfig 中
          */
          if(username==='admin' || isPublic || menus.indexOf(key) !== -1){
            return true;
          }else if(item.children){ // 4. 如果当前用户(menus)有此item的某个子item的权限  但是menus 里没用一级路由  也要显示出来
            return !!(item.children.find(child=>menus.indexOf(child.key) !== -1))
          }
          return false;
     }


      /*
       根据menu的数据数组生成对应的标签数组
      使用reduce() + 递归调用
      */
      getMenuNodes = (menuList) => {
         const path = this.props.location.pathname;
         return menuList.reduce((pre,item)=>{
             
          // 如果当前用户有item对应的权限, 才需要显示对应的菜单项
          if(this.hasAuth(item)){
              // 向pre添加<Menu.Item>
             if(!item.children){
               // 选中 只能停在  Menu.Item 上   '/product/detail'.indexOf('/product') ===0
               if(item.key ===path || path.indexOf(item.key)===0){
                   this.props.setHeadTitle(item.title)
               }
              pre.push((
                <Menu.Item key={item.key} onClick={()=>{this.props.setHeadTitle(item.title)}}>
                <Link to={item.key}>
                  <Icon type={item.Icon}/>
                  <span>{item.title}</span>
                </Link>
                </Menu.Item>
              ))
           }else{
             // 查找一个与当前请求路径匹配的子Item  (/a/b).indexOf(/a) === 0   (/aa/b).indexOf(/b) === 3
             const cItem = item.children.find(cItem => path.indexOf(cItem.key)===0)
             //const cItem = item.children.find(cItem => cItem.key===path)
             if (cItem) {
              this.openKey = item.key
              }
             // 向pre添加<SubMenu>
             pre.push((
              <SubMenu key={item.key}
              title={
                <span>
                  <Icon type={item.Icon} />
                  <span>{item.title}</span>
               </span>
               }
              >
              {this.getMenuNodes(item.children)}
               </SubMenu> 
             ))
             }
            }
             return pre;
         },[])
      }

        /*
          componentWillMount与componentDidMount的比较
          componentWillMount: 在第一次render()前调用一次, 为第一次render()准备数据(同步)
          componentDidMount: 在第一次render()之后调用一次, 启动异步任务, 后面异步更新状态重新render
        */
      componentWillMount () {
        this.menuNodes = this.getMenuNodes(menuList)
       }

     render(){
      // 得到当前 请求路由路径  location属性可能为undefined  用 withRouter
      // /product /product/detail  这样的路由也要匹配上
      let path = this.props.location.pathname;  
      if(path.indexOf('/product')===0) { // 当前请求的是商品或其子路由界面
          path = '/product'
      }
      console.log('path9999',path);   // /  /home
      // 得到需要打开菜单项的key
      const openKey = this.openKey
      return (
        <div className="left-nav">
         <Link to='/' className="left-nav-header">
          <img src={logo} alt="logo"/>
          <h1>硅谷后台</h1>          
        </Link>
        <Menu
           mode="inline"
           theme="dark"
           selectedKeys={[path]}
           defaultOpenKeys={[openKey]}
           >
          { /*
            <Menu.Item key="/home">
              <Link to='/home'>
                <Icon type="pie-chart"/>
                <span>首页</span>
              </Link>
            </Menu.Item>
            <SubMenu  key="sub1"
               title={
                 <span>
                   <Icon type="pie-chart"/>
                   <span>商品</span>
                </span>
                }
              >
              <Menu.Item key="/category">
               <Link to='/category'>
                 <Icon type="mall"/>
                 <span>品类管理</span>
               </Link>
              </Menu.Item>
              <Menu.Item key="/product">
              <Link to='/product'> 
                <Icon type="mall"/>
                <span>品类管理2</span>
              </Link>
              </Menu.Item>
              </SubMenu>  */
            }
           { this.menuNodes } 
        </Menu>
        </div>
      )
    }
}


/*
withRouter高阶组件:
包装非路由组件, 返回一个新的组件
新的组件向非路由组件传递3个属性: history/location/match
 */

export default connect(
  state=>({user:state.user}),
  {setHeadTitle}
)(withRouter(LeftNav))